<template>
  <div id="app">
    <nav v-if="$route.path !== '/login'">
      <router-link to="/">首页</router-link> |
      <router-link to="/public-activities">活动列表</router-link>
      <template v-if="userRole === 'admin'">
        | <router-link to="/activity-management">活动管理</router-link>
      </template>
    </nav>
    <router-view/>
  </div>
</template>

<script>
export default {
  computed: {
    userRole() {
      return localStorage.getItem('userRole');
    }
  }
};
</script>

<style>
nav {
  padding: 20px;
  background-color: #f8f9fa;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

nav a {
  font-weight: 500;
  margin: 0 10px;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

nav a.router-link-exact-active {
  color: #ffffff;
  background-color: #42b983;
}

nav a:hover:not(.router-link-exact-active) {
  background-color: #e9ecef;
}
</style>